<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap-table动态列</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="http://www.chendd.cn/app/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../bootstrap.min.css" />
<link rel="stylesheet" href="../dist/bootstrap-table.css" />
<script type="text/javascript" src="../../jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../popper.min.js"></script>
<script type="text/javascript" src="../../bootstrap.min.js"></script>
<script type="text/javascript" src="../dist/bootstrap-table.min.js"></script>
</head>
<body>

<div id="toolbar">
    <button class="btn btn-primary" data-date="new Date(2020,2,0)"><i class="fa fa-search fa-1"></i>&nbsp;2020年2月</button>
    <button class="btn btn-info" data-date="new Date(2020,3,0)"><i class="fa fa-search fa-1"></i>&nbsp;2020年3月</button>
    <button class="btn btn-danger" data-date-default data-date="new Date(2020,4,0)"><i class="fa fa-search fa-1"></i>&nbsp;2020年4月</button>
</div>
<table id="data-table"></table>

<script type="text/javascript">
$(function(){
    $("button[data-date]").click(function () {
        var date = eval($(this).data("date"));
        loadData(date);
    });
    var defaultDate = eval($("button[data-date-default]").data("date"));
    loadData(defaultDate);
});

function loadData(date){
    var month = date.getMonth() + 1;
    var maxDate = new Date(date.getFullYear() , month , 0).getDate();
    var dynamicColumnCount = 5; //动态列
    var columns = [[
        {"title" : "序号" , "field": "number" , align: "center" , valign: "middle" , "rowspan" : 2},
        {"title" : "日期" , align: "center" , valign: "middle", "colspan": dynamicColumnCount},
        {"title" : "城市" , "field": "city" , align: "center", sortable: true , valign: "middle" , "rowspan" : 2},
        {"title" : "温度" , "field": "weather" , align: "center", sortable: true , valign: "middle" , "rowspan" : 2}
    ]];
    //构造动态列
    var dynamicColumn = [];
    for(var i = maxDate ; i > maxDate - dynamicColumnCount ; i--){
        var columnDate = {"title" : month + "月" +  i + "日" , "field": "day_" + i , align: "center" , valign: "middle"};
        dynamicColumn.push(columnDate);
    }
    columns[1] = dynamicColumn;
    //构造数据
    var datas = [];
    for(var i=0 ; i < 10 ; i++){
        var data = {"number" : i + 1 , "city" : "襄阳" , "weather" : (15 + i) + " °C"};
        for(var j = maxDate ; j > maxDate - dynamicColumnCount ; j--){
            data["day_" + j] =  j % 2 == 0 ? "√" : "×";
        }
        datas[i] = data;
    }
    $("#data-table").bootstrapTable("destroy").bootstrapTable({
        clickToSelect: true,
        singleSelect: true,
        toolbar: "#toolbar",
        "columns": columns,
        data: datas
    });
}
</script>
</body>
</html>